<template>
  <div class='progressBar'>
    <progress :percent="percent"
              activeColor="#ea5a49" />
    <p>{{year}}已经过去{{days}}天</p>
  </div>
</template>


<script>
export default {
  computed: {
    year () { // 今年是几几年
      return new Date().getFullYear()
    },
    days () { // 已经过了多少天
      let start = new Date('2019/01/01')
      let offset = new Date().getTime() - start.getTime()
      return parseInt(offset / 1000 / 60 / 60 / 24) + 1
    },
    totalDays () { // 今天总天数
      return this.isLeapYear() ? 366 : 365
    },
    percent () { // 百分比
      return (this.days * 100 / this.totalDays).toFixed(1)
    }
  },
  methods: {
    isLeapYear () {
      let year = new Date().getFullYear()
      if (year % 4 === 0 && year % 100 !== 0) {
        return true
      } else if (year % 400 === 0) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang='scss'>
.progressBar {
  text-align: center;
  margin-top: 15rpx;
  margin-bottom: 30rpx;
  width: 100%;
  progress {
    margin-bottom: 10px;
  }
}
</style>
